<template>
	<view class="audo-video">
		<video id="myVideo" :src="url" class="hidden" @timeupdate="timeupdate" ref="video" @loadedmetadata="loadedmetadata" ></video>
		
		<view class="slider-box">
			<text class="mm">{{timer}}</text>
			<slider 
				style="width: 500upx;"
				@change="sliderChange"
				@changing="sliderChanging"
				class="audio-slider" 
				block-size="16" 
				:min="0"
				:max="duration"
				:value="currentTime"
				activeColor="#e1bd90"
				@touchstart="lock= true"
				@touchend="lock = false"
				/>
			<text class="ss">{{overTimer}}</text>
		</view>
		 
		 
		<view class="audio_box">
			<view class="text"></view>
			<view class="audio_contral">
				<view class="contral_wrap">
					<view class="previous ">
						<image src="../../static/course/7.png"></image>
					</view>
					<view class="play">
						<image class="img" @tap="play" :src="status == false?'../../static/course/22.png':'../../static/course/5.png'"></image>
					</view>
					<view class="next">
						<image src="../../static/course/6.png"></image>
					</view>
				</view>
			</view>
			
			<!-- <view class="text" @click="toText">
				<view class="text_img">
					<image src="../../static/course/19.png"></image>
				</view>
				<view class="text_name">文稿</view>
			</view> -->
			<view class="text">
				<!-- <view class="text_img">
					<image src="../../static/course/19.png"></image>
				</view> -->
				<!-- <view class="text_name">文稿</view> -->
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		
		props: {
			url: ''
		},
		data() {
			return {
				lock: false, // 锁
				status: false, // false暂停 true播放
				currentTime: 0,  //当前进度
				duration: 100, // 总进度
				videoContext: ''
			}
		},
		computed:{
			timer() {
				return calcTimer(this.currentTime)
			},
			overTimer() {
				return calcTimer(this.duration)
			}
		},
		created() {
			 this.videoContext = uni.createVideoContext('myVideo')
		},
		mounted() {
		},
		methods: {
			// 倍速
			setRate(num) {
				this.videoContext.playbackRate(num)
			},
			
			// 播放
			play() {
				if(this.status == false){
					this.videoContext.play();
					this.status = true;
					// console.log('%c播放','color:skyblue;font-size:40px;')
				}else{
					this.status = false;
					this.videoContext.pause();
					// console.log('%c暂停' , 'color:red;font-size:40px;')
				}
			},
			
			
			// 更新进度条
			timeupdate(event) {
				if(this.lock) return; // 锁
				var currentTime,duration;
				if(event.detail.detail) {
					currentTime = event.detail.detail.currentTime
					duration = event.detail.detail.duration
				}else {
					currentTime = event.detail.currentTime
					duration = event.detail.duration
				}
				this.currentTime = currentTime
				this.duration = duration
			},
			
			// 拖动进度条
			sliderChange(data) {
				this.videoContext.seek(data.detail.value)
			},
			
			//拖动中
			sliderChanging(data) {
				this.currentTime = data.detail.value
			},
			
			// 视频加载完成
			loadedmetadata(data) {
				this.duration = data.detail.duration
			},
			
			// 跳转到文稿
			toText(){
				var chapter_id = this.chapter_id;
				// console.log('chapter_id',chapter_id)
				uni.navigateTo({
					url:'../../pages/audioText/audioText'
				})
			}
		}
	}
	
	function calcTimer(timer) {
		if(timer === 0 || typeof timer !== 'number') {
			return '00:00'
		}
		let mm = Math.floor(timer / 60)
		let ss = Math.floor(timer % 60)
		if(mm < 10) {
			mm = '0' + mm
		}
		if(ss < 10) {
			ss = '0' + ss
		}
		return mm + ':' + ss
	}
	
</script>

<style scoped lang="scss">
	.audo-video {
		padding-bottom: 40upx;
		.audio_box{
			display: flex;
			align-items: center;
			justify-content: center;
			.audio_contral{
				flex: 10;
				.contral_wrap{
					width: 60%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					.previous{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 40upx;
							height: 40upx;
						}
					}
					.play{
						flex: 2;
						display: flex;
						align-items: center;
						justify-content: center;
						.img{
							width: 80upx;
							height: 80upx;
						}
						.hidden{
							display: none;
						}
					}
					.next{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 40upx;
							height: 40upx;
						}
					}
				}
			}
			.text{
				flex: 1;
				.text_img{
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.text_name{
					font-size: 26rpx;
					color: #e6dfa6;
				}
			}
		}
	}
	.slider-box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #999;
	}
	
	button {
		display: inline-block;
		width: 100upx;
		background-color: #fff;
		font-size: 24upx;
		color: #000;
		padding: 0;
	}
	.hidden {
		position: fixed;
		z-index: -1;
		width: 1upx;height: 1upx;
	}
</style>
